<template>
    <div class="postloane">
        <div class="neirong">
            <div class="dengj">
                <div class="bisoti">合同信息</div>
                <table cellpadding="10" cellspacing="0" class="color">
                    <div class="trtitle">贷款人信息</div>
                    <tr class="width">
                        <td>贷款业务编号</td>
                        <td><input /></td>
                        <td>客户名称</td>
                        <td><input /></td>

                    </tr>
                    <tr>
                        <td>借款金额(小写)</td>
                        <td><input /></td>
                        <td>借款金额(大写)</td>
                        <td><input /></td>

                    </tr>
                    <tr>
                        <td>期限</td>
                        <td><input /></td>
                        <td>逾期期数</td>
                        <td><input /></td>
                    </tr>
                    <tr>
                        <td>逾期天数</td>
                        <td><input /></td>
                    </tr>
                </table>
                <table cellpadding="10" cellspacing="0" class="color">
                    <div class="trtitle">保全信息</div>
                    <tr class="width">
                        <td>登记人</td>
                        <td><input /></td>
                        <td>保全时间</td>
                        <td><input /></td>

                    </tr>
                    <tr>
                        <td>保全内容</td>
                        <td><input /></td>
                    </tr>
                   
                </table>

                <!-- 附件 -->
                <div class="fujian">
                    <div class="titlebottom">
                        <p class="bold">附件</p>
                        <el-button type="primary" plain>打包下载</el-button>
                    </div>
                    <p class="fj1">附件1:房产证</p>
                    <div class="shangchuank">
                        <div class="content">
                            <el-upload
                            v-model:file-list="fileList"
                            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                        >
                            <el-icon><Plus /></el-icon>
                        </el-upload>
                        <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                        </div>
                    </div>
                </div>
                <div class="kuang">
                    <div class="fanhui" @click="fanhui"><el-icon>
                            <ArrowLeft />
                        </el-icon>返回</div>
                    <el-button type="primary" plain class="anniu">保存</el-button>
                    <el-button type="primary" class="anniu">提交</el-button>
                </div>
            </div>

        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

var router = useRouter();
// 返回
var fanhui = () => {
    router.go(-1)
}

</script>

<style scoped>


.color tr {
    border: 1px solid #ebeef5;
}

.color tr td {
    border: 1px solid #ebeef5;
}

.trtitle {
    padding: 20px;
}

.width td {
    width: 300px;
    border: 1px solid #ebeef5;
}

.color tr td input {
    width: 300px;
    height: 30px;
    border: 0;
    outline: none;

}

.neirong {
    height: 100%;
    width: 100%;
    background-color: rgb(243, 244, 244);
}

.bisoti {
    padding: 20px 0px;
    font-size: 20px;
    font-weight: bold;
}

.dengj {
    height: 100%;
    width: 100%;
    background-color: white;
    margin-left: 20px;
    padding: 10px;
}

.fanhui {
    width: 80px;
    height: 40px;
    border: 1px solid #d2d3d6;
    color: #616263;
    text-align: center;
    line-height: 40px;

}

.kuang {
    width: 400px;
    height: 40px;
    float: right;
    margin-right: 50px;
    display: flex;
    justify-content: space-between;

}

.kuang .anniu {
    width: 80px;
    height: 40px;
}

/* 附件 */
.fujian .titlebottom {
    margin-top: 20px;
    width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.titlebottom .bold{
    font-weight: bold;
}
.shangchuank{
    width: 400px;
    height: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
avatar-uploader .el-upload {

    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);

}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
    background-color: #dbdcde26;
}</style>
